<!-- 微信小程序 -->
<template>
	<div class="wechat_app">
		<!-- 提示 -->
		<div class="ls-card">
			<el-alert title="温馨提示：请先前往微信小程序后台申请认证微信小程序。" type="info" :closable="false" show-icon />
		</div>

		<!-- 主要内容 -->
		<el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" size="small">
			<!-- 微信小程序 -->
			<div class="ls-card m-t-16">
				<div class="card-title">微信小程序</div>
				<div class="card-content m-t-24">
					<el-form-item label="小程序名称">
						<el-input class="ls-input" v-model="form.name" size="small">
						</el-input>
					</el-form-item>
					<el-form-item label="原始ID">
						<el-input class="ls-input" v-model="form.original_id" size="small"></el-input>
					</el-form-item>
					<el-form-item label="小程序码">
						<material-select :limit="1" v-model="form.qr_code" />
						<div class="flex">
							<div class="muted xs m-r-16">建议尺寸：400*400像素，支持jpg，jpeg，png格式</div>
							<!-- <el-popover placement="right" width="200" trigger="hover">
								<el-image
									src="https://img2.baidu.com/it/u=3357699356,1912406716&fm=26&fmt=auto&gp=0.jpg" />
								<el-button slot="reference" type="text">查看示例</el-button>
							</el-popover> -->
						</div>
					</el-form-item>
				</div>
			</div>

			<!-- 开发者ID -->
			<div class="ls-card m-t-16">
				<div class="card-title">开发者ID</div>
				<div class="card-content m-t-24">
					<el-form-item label="AppID" prop="app_id">
						<el-input class="ls-input" v-model="form.app_id" size="small">
						</el-input>
					</el-form-item>
					<el-form-item label="AppSecret" prop="app_secret">
						<el-input class="ls-input" v-model="form.app_secret" size="small"></el-input>
						<div class="muted xs m-r-16">
							小程序账号登录微信公众平台，点击开发>开发设置->开发者ID，设置AppID和AppSecret
						</div>
					</el-form-item>
				</div>
			</div>

			<!-- 服务器域名 -->
			<div class="ls-card m-t-16">
				<div class="card-title">服务器域名</div>
				<div class="card-content m-t-24">
					<el-form-item label="request合法域名">
						<el-input class="ls-input m-r-10" v-model="form.request_domain" size="small" disabled>
						</el-input>
						<el-button size="small" @click="onCopy(form.request_domain)">复制</el-button>
						<div class="muted xs m-r-16">
							小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写https协议域名
						</div>
					</el-form-item>
					<el-form-item label="socket合法域名">
						<el-input class="ls-input m-r-10" v-model="form.socket_domain" size="small" disabled></el-input>
						<el-button size="small" @click="onCopy(form.socket_domain)">复制</el-button>
						<div class="muted xs m-r-16">
							小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写wss协议域名
						</div>
					</el-form-item>
					<el-form-item label="uploadFile合法域名">
						<el-input class="ls-input m-r-10" v-model="form.upload_file_domain" size="small" disabled>
						</el-input>
						<el-button size="small" @click="onCopy(form.upload_file_domain)">复制</el-button>
						<div class="muted xs m-r-16">
							小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写https协议域名
						</div>
					</el-form-item>
					<el-form-item label="downloadFile合法域名">
						<el-input class="ls-input m-r-10" v-model="form.download_file_domain" size="small" disabled>
						</el-input>
						<el-button size="small" @click="onCopy(form.download_file_domain)">复制</el-button>
						<div class="muted xs m-r-16">
							小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写https协议域名
						</div>
					</el-form-item>
					<el-form-item label="udp合法域名">
						<el-input class="ls-input m-r-10" v-model="form.udp_domain" size="small" disabled></el-input>
						<el-button size="small" @click="onCopy(form.udp_domain)">复制</el-button>
						<div class="muted xs m-r-16">
							小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写udp协议域名
						</div>
					</el-form-item>
				</div>
			</div>

			<!-- 业务域名 -->
			<div class="ls-card m-t-16">
				<div class="card-title">业务域名</div>
				<div class="card-content m-t-24">
					<el-form-item label="业务域名">
						<el-input class="ls-input m-r-10" v-model="form.business_domain" size="small" disabled>
						</el-input>
						<el-button size="small" @click="onCopy(form.business_domain)">复制</el-button>
						<div class="muted xs m-r-16">
							小程序账号登录微信公众平台，点击开发>开发设置->业务域名，填写业务域名
						</div>
					</el-form-item>
				</div>
			</div>

			<!-- 消息推送 -->
			<!-- <div class="ls-card m-t-16">
				<div class="card-title">消息推送</div>
				<div class="card-content m-t-24">
					<el-form-item label="URL">
						<el-input class="ls-input m-r-10" v-model="form.url" size="small" disabled></el-input>
						<el-button size="small" @click="onCopy(form.url)">复制</el-button>
						<div class="muted xs m-r-16">
							小程序账号登录微信公众平台，点击开发>开发设置>消息推送配置，填写服务器地址（URL）
						</div>
					</el-form-item>
					<el-form-item label="Token">
						<el-input class="ls-input m-r-10" v-model="form.token" size="small"></el-input>
						<div class="muted xs m-r-16">
							小程序账号登录微信公众平台，点击开发>开发设置>消息推送配置，设置令牌Token。不填默认为“LikeMall”
						</div>
					</el-form-item>
					<el-form-item label="EncodingAESKey">
						<el-input class="ls-input m-r-10" v-model="form.encoding_aes_key" size="small"></el-input>
						<div class="muted xs m-r-16">
							消息加密密钥由43位字符组成，字符范围为A-Z,a-z,0-9
						</div>
					</el-form-item>
					<el-form-item label="消息加密方式">
						<div>
							<el-radio class="lighter" :label="1" v-model="form.encryption_type">
								明文模式(不使用消息体加解密功能，安全系数较低)
							</el-radio>
						</div>
						<div>
							<el-radio class="lighter" :label="2" v-model="form.encryption_type">
								兼容模式(明文、密文将共存，方便开发者调试和维护)
							</el-radio>
						</div>
						<div>
							<el-radio class="lighter" :label="3" v-model="form.encryption_type">
								安全模式（推荐）(消息包为纯密文，需要开发者加密和解密，安全系数高)
							</el-radio>
						</div>
					</el-form-item>
					<el-form-item label="数据格式">
						<el-radio-group class="m-r-16 " v-model="form.data_format">
							<el-radio :label="1" class="muted">JSON</el-radio>
							<el-radio :label="2" class="muted">XML</el-radio>
						</el-radio-group>
					</el-form-item>
				</div>
			</div> -->
		
		</el-form>

		<!--  表单功能键  -->
		<div class="bg-white ls-fixed-footer">
			<div class="row-center flex" style="height: 100%">
				<!-- <el-button size="small" @click="$router.go(-1)">取消</el-button> -->
				<el-button size="small" type="primary" @click="putWechatAppSetting()">保存</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import {
		Vue,
		Component
	} from 'vue-property-decorator'
	import MaterialSelect from '@/components/material-select/index.vue'
	import {
		apiWechatMiniSetting,
		apiWechatMiniSettingSet
	} from '@/api/channel/wechat_app'
	import {
		WechatMiniSetting_Res,
		WechatMiniSetting_Req
	} from '@/api/channel/wechat_app.d'
	import {
		copyClipboard
	} from '@/utils/util'
	@Component({
		components: {
			MaterialSelect,
		},
	})
	export default class WechatApp extends Vue {
		/** S Data **/
		form: WechatMiniSetting_Res = {
			name: '', // 小程序名称
			original_id: '', // 原始id
			qr_code: '', // 二维码
			app_id: '',
			app_secret: '',
			request_domain: '', // request合法域名
			socket_domain: '', // socket合法域名
			upload_file_domain: '', // uploadFile合法域名
			download_file_domain: '', // downloadFile合法域名
			udp_domain: '', // udp合法域名
			business_domain: '', // 业务域名
			url: '',
			token: '',
			encoding_aes_key: '',
			encryption_type: 1, // 消息加密方式 1-明文模式 2-兼容模式 3-安全模式
			data_format: 1 // 数据格式 1-JSON 2-XML
		}
		
		// 表单验证
		formRules = {
			app_id: [{
				required: true,
				message: '必填项不能为空',
				trigger: 'blur'
			}],
			app_secret: [{
				required: true,
				message: '必填项不能为空',
				trigger: 'blur'
			}],
		}
		
		$refs!: {
			formRef: any
		}
		/** E Data **/

		// 获取APP设置
		getWechatAppSetting() {
			apiWechatMiniSetting()
				.then((res: any) => {
					this.form = res
					// this.$message.success('获取数据成功!')
				})
				.catch(() => {
					//this.$message.error('获取数据失败!')
					console.log('数据请求失败!')
				})
		}

		// 修改APP设置
		putWechatAppSetting() {
			this.$refs.formRef.validate((valid: boolean) => {
				// 预校验
				if (!valid) {
					return this.$message.error('请完善信息');
				}
				apiWechatMiniSettingSet(this.form)
					.then((res: any) => {
						this.getWechatAppSetting()
						//this.$message.success('保存成功!')
					})
					.catch(() => {
						//this.$message.error('保存失败!')
					})
			})
		}
		// 复制到剪贴板
		onCopy(value: string) {
			copyClipboard(value).then(() => {
				this.$message.success('复制成功')
			}).catch(err => {
				this.$message.error('复制失败')
				console.log(err)
			})
		}
		
		/** S Life Cycle **/
		created() {
			this.getWechatAppSetting()
		}
		/** E Life Cycle **/
	}
</script>

<style lang="scss" scoped>
	.ls-card {
		.ls-input {
			width: 280px;
		}

		.card-title {
			font-size: 14px;
			font-weight: 500;
		}
	}

	.wechat_app {
		min-height: calc(100vh - #{$--header-height} - 92px);
		margin-bottom: 60px;
	}
</style>
